<template>
    <div>
        <backTitle v-if="!detailShow" @goBack="goBack" title="群发详情" />
        <backTitle v-show="detailShow" @goBack="detailShow = false" title="群统计页" />
        <div v-if="!detailShow" class="madp-pd">
            <div class="madp-basic-info">基础信息</div>
            <el-form label-width="120px">
                <el-form-item label="创建者:">
                    <div class="madp-creator">
                        <i class="el-icon-user-solid"></i>
                        <span style="padding-left: 5px">
                            {{ basicList.creator }}
                        </span>
                    </div>
                </el-form-item>
                <el-form-item label="发送时间:">
                    {{ basicList.sendTime }}
                </el-form-item>
                <el-form-item label="群发对象:">
                    {{ basicList.sendMsg }}
                </el-form-item>
                <el-form-item label="消息类型:">
                    <span class="madp-infoType">
                        {{ basicList.messageType }}
                    </span>
                </el-form-item>
            </el-form>
            <div class="madp-today-data">
                <div>
                    <div>
                        <span class="madp-today-title">共{{ page.total }}个群聊</span>
                        <span class="madp-refresh">|</span>
                        <el-button icon="el-icon-refresh" @click="toSynData" type="primary" class="madp-refresh-btn">更新数据</el-button>
                        <span class="madp-refresh">更新于:</span>
                        <span class="madp-refresh">{{ syncWorkRoomTime }}</span>
                    </div>
                </div>
                <el-form :inline="true" class="madp-totay-text" ref="searchForm" :model="searchForm">
                    <div>
                        <el-form-item label="搜索群聊:" prop="roomName">
                            <el-input placeholder="请输入要搜索的群聊" prefix-icon="el-icon-search" v-model.trim="searchForm.roomName" @blur="searchFn"></el-input>
                        </el-form-item>
                    </div>
                    <div>
                        <el-form-item>
                            <el-button type="primary" @click="reset('searchForm')">清空</el-button>
                        </el-form-item>
                    </div>
                </el-form>
                <el-table
                    :data="tableData"
                    :header-cell-style="{
                        background: 'rgb(255, 191, 191)',
                        color: 'rgb(44,44,44)',
                    }"
                    stripe
                    v-loading="loading"
                >
                    <el-table-column prop="name" label="群聊名称" align="center"></el-table-column>
                    <el-table-column prop="creator" label="发送员工" align="center">
                        <template slot-scope="scope">
                            <div class="madp-creator-box">
                                <div class="madp-creator">
                                    <i class="el-icon-user-solid"></i>
                                    <span style="padding-left: 5px">
                                        {{ scope.row.creator }}
                                    </span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="消息送达状态" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status === 1">已送达</span>
                            <span v-else>发送失败</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sendTime" label="发送时间" align="center"></el-table-column>
                    <el-table-column prop="operation" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="toRoomDetails(scope.row)" type="text">群详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 列表分页 -->
                <el-pagination
                    background
                    class="madp-black-pagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.current"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                ></el-pagination>
            </div>
        </div>
        <statistical v-if="detailShow" :workRoomId="workRoomId" @goBack="detailShow = false" />
    </div>
</template>
<script>
import { detailBasic, detailList, synData } from '@/api/operation-manage/group-records';
import backTitle from '@/components/back-title/';
import statistical from './statistical.vue';
export default {
    props: {
        detailObj: {
            type: Object,
            default: () => {
                return {};
            },
        },
    },
    components: {
        backTitle,
        statistical,
    },
    data() {
        return {
            detailShow: false,
            workRoomId: '',
            page: {
                current: 1,
                size: 10,
                total: 0,
            },
            basicList: [],
            searchForm: {
                roomName: '',
            },
            tableData: [],
            options: [
                {
                    status: 1,
                    label: '已送达',
                },
                {
                    status: 0,
                    label: '发送失败',
                },
            ],
            syncWorkRoomTime: '',
            loading: true,
        };
    },
    mounted() {
        this.getBasicInfo();
        this.getDetailList();
    },
    methods: {
        goBack() {
            this.$emit('goBack');
        },
        //获取群详情基础信息
        getBasicInfo() {
            let params = {
                massId: this.detailObj.id,
            };
            detailBasic(params).then((res) => {
                if (res.data.code == 0) {
                    this.basicList = res.data.data;
                }
            });
        },
        //获取群详情列表
        getDetailList(data) {
            if (!data) {
                this.page.current = 1;
                this.page.size = 10;
            }
            let params = {
                current: this.page.current,
                size: this.page.size,
                massId: this.detailObj.id,
                roomName: this.searchForm.roomName,
                status: this.searchForm.status,
            };
            detailList(params).then((res) => {
                if (res.data && res.data.code == 0) {
                    this.tableData = res.data.data.records;
                    this.page.total = res.data.data.total;
                    this.syncWorkRoomTime = res.data.data.extraProps.updateTimeByMassMsg;
                    this.loading = false;
                }
            });
        },
        searchFn() {
            this.page.current = 1;
            this.getDetailList();
        },
        toRoomDetails(row) {
            this.detailShow = true;
            this.workRoomId = row.contactId;
        },
        reset(searchForm) {
            this.$refs[searchForm].resetFields();
            this.getDetailList();
        },
        toSynData() {
            this.loading = true;
            let params = {
                type: 1,
            };
            synData(params)
                .then((res) => {
                    this.loading = false;
                    if (res.data.code === 0) {
                        this.getDetailList();
                    }
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        handleSizeChange(val) {
            this.page.size = val;
            this.getDetailList(this.page);
        },
        handleCurrentChange(val) {
            this.page.current = val;
            this.getDetailList(this.page);
        },
    },
};
</script>
<style lang="scss" scoped>
.madp-basic-info {
    height: 50px;
    line-height: 50px;
    border-bottom: 0.5px solid #ccc;
    margin-bottom: 10px;
}
.madp-today-data {
    margin: 15px 0;
}
.madp-totay-text {
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
}
.madp-today-title {
    font-size: 16px;
    font-weight: 600;
    padding-right: 10px;
}
.madp-creator-box {
    display: flex;
    justify-content: center;
}
.madp-creator {
    padding: 0 5px;
    border: 0.5px solid #ccc;
    border-radius: 4px;
    width: fit-content;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.el-icon-user-solid {
    color: #ed5555;
}
.madp-refresh,
.el-icon-refresh {
    padding-right: 10px;
    line-height: 36px;
    font-size: 12px;
}
.madp-refresh-btn {
    margin-right: 10px;
}
.madp-excel {
    color: #ed5555;
    border: 0.5px solid #ed5555;
    border-radius: 2px;
    width: 68px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    margin-right: 10px;
    font-size: 12px;
}
.madp-infoType {
    color: rgb(236, 157, 10);
}
.madp-black-pagination {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 10px;
}
.madp-pd {
    padding: 50px 20px 0;
}
</style>
